<template>
    <div id="content">
        <div class="article_wrap" v-for="(item, index) in articleList" :key="index">
            <div class="article_title" @click="articleDetail( item.id )">{{ item.title }}</div>
                <div class="article_info">
                    <span class="article_info_username">{{ item.author }}</span>
                        <span class="article_info_date">发表于：{{ item.created_date }}</span>
                            <span class="article_info_label">标签：
                                <span v-if="item.labels.length === 0">未分类</span>
                                <el-tag v-else class="tag_margin" v-for="(tag, index) in item.labels" :key="index">{{ tag }}</el-tag>
                            </span>
                            <div @click="addStar(item.id)" :class="{'el-icon-star-off': true, 'star': true}"><span class="calc_count">{{item.starsCount}}</span></div>
                            <div class="el-icon-message"><span class="calc_count">{{item.CommentCount}}</span></div>
                            <div class="el-icon-view"><span class="calc_count">{{item.read_count}}</span></div>
                </div>
                <div class="article_gist">文章摘要：{{ item.gist }}</div>
                    <div @click="articleDetail( item.id )" class="article_button article_all">阅读全文 ></div>
                    <div class="article_underline"></div>
                </div>
            </div>
</template>

<script>
    export default {
        name: 'article',
        data() {
            return {
                articleList: [],
                userInfo: [],
                flag: false,
                starsCount: 0,
                messageCount: 0,
                clickCount: 0,
                timer: null
            }
        },
        mounted: function() {
            var _this = this;
            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/getArticleList',
                data: {}
            }).then(function(res) {
                _this.articleList = res.data.payload.article;
                for (var i = 0; i < _this.articleList.length; i++) {
                    if (_this.articleList[i].labels.length > 0) {
                        _this.articleList[i].labels = _this.articleList[i].labels.split(',');
                    }
                }
            }).catch(function(e) {
                _this.$message.error('服务器可能出现异常!');
            });
        },
        methods: {
            articleDetail: function(id) {
                this.$router.push('/articleDetail/' + id)
            },
            addStar: function(id) {
                this.userInfo = JSON.parse(localStorage.getItem('user'));
                if (!this.userInfo) {
                    this.$message.success('用户未登录，请先登录!');
                    this.$router.push('/admin/signin');
                } else {
                    var _this = this;

                    this.$req({
                        method: "post",
                        url: 'http://49.235.28.88:3000/article/v1/addArticleStar',
                        data: {
                            account: this.userInfo.account,
                            app_sid: this.userInfo.app_sid,
                            article_id: id
                        }
                    }).then(function(res) {
                        if (res.data.status == 400) {
                            _this.$message.error(res.data.err);
                        } else if (res.data.status == 420) {
                            _this.$message.error(res.data.err.msg);
                            if (!_this.timer) {
                                _this.timer = setInterval(() => {
                                    location.reload();
                                    clearInterval(_this.timer);
                                    _this.timer = null;
                                }, 1000);
                            }

                        } else if (res.data.status == 200) {
                            _this.$message.success(res.data.payload.msg);
                            if (!_this.timer) {
                                _this.timer = setInterval(() => {
                                    location.reload();
                                    clearInterval(_this.timer);
                                    _this.timer = null;
                                }, 1000);
                            }
                        }
                    }).catch(function(e) {
                        _this.$message.error('服务器可能出现异常!');
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .article_wrap {
        padding: 20px;
    }

    .article_title {
        display: inline-block;
        color: white;
        font-size: 22px;
        font-weight: 600;
        cursor: pointer;
    }

    .article_title:hover {
        border-bottom: 1px solid #222;
        color: black;
        background: white;
    }

    .article_info {
        color: white;
        font-size: 14px;
        padding-top: 8px;
        margin-top: 10px;
    }

    .article_info_username {
        margin-right: 10px;
    }

    .article_info_date {
        margin-right: 10px;
    }

    .tag_margin {
        margin: 3px;
    }

    .article_gist {
        text-align: center;
        margin-top: 10px;
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 16px;
        color: white;
    }

    .article_button {
        display: inline-block;
        padding: 3px 12px;
        border: 2px solid black;
        color: white;
        font-size: 14px;
        cursor: pointer;
        margin-top: 20px;
    }

    .article_all:hover {
        color: white;
        background: #000;
        font-weight: 600;
    }

    .article_underline {
        height: 1px;
        width: 100%;
        margin-top: 20px;
        background: #545455;
    }

    .star,
    .el-icon-message,
    .el-icon-view {
        color: white;
        margin-left: 15px;
    }

    .star {
      cursor: pointer;
    }
</style>
